import Vue from "vue";
import VueRouter from "vue-router";

// import Home from "../components/home.vue";
// import About from "../components/about.vue";
// import User from "../components/user.vue";
// 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
// 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了
// 路由懒加载：将路由对应的组件打包成一个个的js文件，再这个路由被访问到的时候，才加载对应的组件
// 第一种方式：结合Vue的一部组件和webpack的代码分析
const Home = (resolve) => {
  require.ensure(["../components/home.vue"], () => {
    resolve(require("../components/home.vue"));
  });
};

// 二、AMD写法
const About = (resolve) => require(["../components/about.vue"], resolve);

// 三、ES6写法
const User = () => import("../components/user.vue");
const HomeNews = () => import("../components/homeNews.vue");
const HomeMessage = () => import("../components/homeMessage.vue");
const Profile = () => import("../components/profile.vue");

// 1.注入插件
Vue.use(VueRouter);

// 2.定义路由
const routes = [
  {
    path: "",
    // redirect重定向：默认显示home
    redirect: "/home",
  },
  {
    path: "/about",
    component: About,
    meta: {
      title: "关于",
    },
  },
  {
    path: "/home",
    component: Home,
    meta: {
      title: "首页",
    },
    children: [
      // {
      //   path: "",
      //   redirect: "/home/homeNews",
      // },
      {
        path: "homeNews",
        component: HomeNews,
      },
      {
        path: "homeMessage",
        component: HomeMessage,
      },
    ],
  },
  {
    path: "/user/:id",
    component: User,
    meta: {
      title: "用户",
    },
  },
  {
    path: "/profile",
    component: Profile,
    meta: {
      title: "profile",
    },
  },
];

// 3.创建router实例
const router = new VueRouter({
  routes,
  // 模式转为history，url去掉了hash模式的#号
  mode: "history",
  // 同意给router-link修改activeclass
  linkActiveClass: "active",
});

//   1.全局导航卫士
// 1.1前置钩子
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  // to和from都是route对象
  // document.title = to.meta.title;
  // 上面这样写的话如果有嵌套路由的话是undefined，要使用matched(匹配)获取
  document.title = to.matched[0].meta.title;
  // console.log(to); //到那个页面去?
  // console.log(from); //从那个页面来?
  // 调用该方法后，才能进入下一个钩子
  // 如果是后置钩子,也就是afterEach,不需要主动调用next()函数
  // 这里其实可以判断用户登陆权限之类的，拦截访问 ,权限不符调用next(false)拦截
  next();
});

// 1.2后置钩子(hook) 不需要主动调用next()函数
// router.afterEach((to, from) => {
//   console.log(to);
//   console.log(from);
// });

// 4.导出router实例
export default router;
